<template>
  <!-- 1.利用el-card 创建一个面板 组题列表 -->
  <el-card class="container">
    <!-- 2. 利用el-row 和 el-col 搭配写出 左右布局 -->
    <el-row
      type="flex"
      justify="space-between"
    >
      <!-- 2.1 左面的input -->
      <el-col :span="12">
        <span class="leftspan">关键字</span>
        <el-input
          v-model.trim="listQuery.keyword"
          style="width: 40%"
          placeholder="请输入关键字"
        />
      </el-col>
      <!-- 2.2 右面的清除和搜索框 -->
      <el-col :span="12">
        <el-row
          type="flex"
          justify="end"
        >
          <el-button
            size="small"
            type="default"
            @click="listQuery.keyword = ''"
          >清除</el-button>
          <el-button
            size="small"
            type="primary"
            @click="btnOk"
          >搜索</el-button>

        </el-row>
      </el-col>
    </el-row>
    <!-- 3 这是一个alert 警告框 -->
    <el-alert
      :title="alert"
      type="info"
      show-icon
      class="messageAlert"
      :closable="false"
    />
    <!-- 4  这是表格 el-table -->
    <el-table
      v-loading="loading"
      :data="tableData"
      :stripe="false"
      style="width: 100%"
      :header-cell-style="{background:'#fafafa'}"
    >
      <el-table-column
        prop="id"
        label="编号"
        width="200"
      />
      <el-table-column
        prop="questionType"
        label="题型"
        width="180"
        align="center"
        :formatter="statetype"
      />
      <!-- 4.2 题目编号可以是div + a标签 -->
      <el-table-column
        label="题目编号"
        width="200"
      >
        <template slot-scope="{row}">
          <div
            v-for="obj in row.questionIDs"
            :key="obj.number"
            style="color : #239eff"
          >
            <a
              href="javascript:;"
              @click="btnshowpreview(obj)"
            >{{ obj.number }}</a>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="addTime"
        label="录入时间"
      />
      <el-table-column
        prop="totalSeconds"
        label="答题时间(s)"
      />
      <el-table-column
        prop="accuracyRate"
        label="正确率(%)"
      />
      <el-table-column
        prop="userName"
        label="录入人"
      />
      <!-- 4.1 使用el-button 按钮 删除 -->
      <el-table-column
        label="操作"
        width="120"
      >
        <template slot-scope="{row}">
          <el-button
            icon="el-icon-delete"
            circle
            plain
            type="danger"
            @click="btndelete(row)"
          />
        </template>
      </el-table-column>
    </el-table>
    <!-- 5 使用分页组件el-pagination -->
    <el-row
      type="flex"
      justify="end"
      class="pagination"
    >
      <el-pagination
        background
        layout="prev, pager, next,sizes,jumper"
        :total="listQuery.total"
        :page-sizes="[20, 30, 50, 100]"
        :page-size="listQuery.pagesize"
        :current-page="listQuery.page"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-row>

    <!-- 6 使用组件 -->
    <questionsPreview
      ref="questionsref"
      :questions-previewshow.sync="questionsPreviewshow"
    />

  </el-card>

</template>

<script>
// 引入获取组题列表接口6.10组题列表 组题列表删除
import { randoms, removeRandoms } from '@/api/hmmm/questions.js'
// 引入枚举的题型
import { questionType } from '@/api/hmmm/constants.js'
// 预览框
import questionsPreview from '../components/questions-preview.vue'
export default {
  name: 'Questions',
  components: {
    questionsPreview
  },
  data () {
    return {
      tableData: [],
      listQuery: {
        page: 1,
        pagesize: 20,
        keyword: '',
        total: null
      },
      questionsPreviewshow: false, // 显示弹框
      loading: false
    }
  },
  computed: {
    // 这是提示框的总数据
    alert () {
      return `一共有${this.listQuery.total}条数据`
    }
  },
  created () {
    // 1.请求列表数据在methods定义个方法
    this.randomss()
  },
  methods: {
    async randomss () {
      if (this.listQuery.page === 1) {
        this.loading = true
      }
      await this.randoms()
      this.loading = false
    },
    // 1.1 定义一个请求数据组题列表
    async randoms () {
      const { data } = await randoms(this.listQuery)
      const { items } = data
      const { counts } = data
      // console.log(data)
      this.tableData = items
      this.listQuery.total = counts

    },
    // 2利用表格的数据进行过滤
    statetype (row) {
      var oneWord = ''
      questionType.forEach(obj => {
        if (obj.value === Number(row.questionType)) {
          oneWord = obj.label
        }
      })
      return oneWord
    },
    // 3定义一个删除的点击事件
    async btndelete (row) {
      // console.log(row)
      // 3.1表格里面的删除功能
      try {
        // 3.2点击删除图标弹出弹出的确认框
        await this.$confirm('此操作将永久删除该题组, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        // 3.3确认之后发送请求
        await removeRandoms(row)
        // 3.5提示删除成功
        this.$message.success('删除数据成功')
        // 3.4刷新页面
        this.randoms()
      } catch (err) {
        console.log('取消')
      }
    },
    // 4输入框改变的时候
    handleSizeChange (currentpage) {
      // console.log(currentpage)
      // 把listQuery里面的page改变
      this.listQuery.pagesize = currentpage
      // 刷新页面
      this.randoms()
    },
    // 5 每个分页变化pageSize 改变时会触发
    handleCurrentChange (page) {
      // 把listQuery里面的page改变
      this.listQuery.page = page
      // 刷新页面
      this.randoms()
    },
    // 6搜索页面
    async btnOk () {
      // 刷新页面
      this.listQuery.page = 1
      await this.randoms()
      // this.listQuery.keyword = ''
    },
    // 7 点击题目编号显示预览
    btnshowpreview (obj) {
      // this.questionsId = id
      // 调用子组件里面的方便
      this.$refs.questionsref.detail(obj)
      this.questionsPreviewshow = true
    }
  }
}
</script>

<style scoped lang='scss'>
.container {
  overflow: hidden;
  margin-top: 10px;
  .leftspan {
    margin-left: 10px;
    margin-right: 20px;
  }
  .pagination {
    margin-top: 20px;
    ::v-deep .el-pagination {
      .el-pagination__jump {
        margin-left: 0;
      }
    }
  }
}
.messageAlert {
  margin-top: 20px;
  margin-bottom: 20px;
}
.el-button--danger:focus {
  background: #fef0f0;
  color: #f56c6c !important;
  border-color: #fbc4c4;
}
.el-button--danger:hover {
  color: #fff !important;
  background: #f56c6c;
}
</style>
